<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="aa" uri="http://ajaxanywhere.sourceforge.net/"%>
<%--<%@ taglib tagdir="/WEB-INF/tags" prefix="app"%>--%>
<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>jsp</title>
	<script src="/webjars/jquery/3.5.1/jquery.js"></script>
	<script src="/aa.js"></script>
	<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/resources/css/dashboard.css" />
</head>
<body>
<h1>${msg}</h1>
<br />
<button type="button" id="btQuery" class="btn btn-primary">查询列表</button>
<%--<button type="button" id="btSave" class="btn btn-primary">保存</button>--%>
<div class="container">
	<div class="mb-3">
		<label  class="form-label">ID</label>
		<input type="text" class="form-control"  name="id" id="id">
	</div>
	<div class="mb-3">
		<label  class="form-label">NAME</label>
		<input type="text" class="form-control"  name="name"  id="name">
	</div>
	<button type="button" id="btSave" class="btn btn-success">保存</button>
	<button type="button" id="btSaveIds" class="btn btn-success">保存简单数组</button>
</div>

<aa:zone name="zoneJ">
	<ul>
		<c:forEach var="o" items="${list}" varStatus="s">
			<li class="li_item">
				<input type="checkbox" class="checkbox" data-id="${o.id}" data-name="${o.name}" data-createDate="${o.createDate}"/>
					${s.count}, id: <span name="id">${o.id}</span> ,
				name: <span name="name">${o.name}</span> ,createDate:
					<span name="createDate">${o.createDate}</span></li>
		</c:forEach>
	</ul>
<%--	<app:Page id="page1" pg="${page}" pageCallback="goPage" />--%>

</aa:zone>
<button type="button" id="btSaves" class="btn btn-success">保存复杂数组</button>
<button type="button" id="btSaves2" class="btn btn-success">保存复杂数组2</button>
<button type="button" id="btSaveDemoVo" class="btn btn-success">保存复杂对象</button>
<script type="text/javascript">
	$('#btQuery').click(function() {
		listPage(1)
	});

	$('#btSave').click(function() {

		let demo = {
			id: $('#id').val(),
			name: $('#name').val(),
		};
		$http.post('/save/demo',demo).then(res=>{
			console.log(res)
		})
	});

	$('#btSaveIds').click(function() {

		let demo = [1,2,3]
		$http.post('/save/demo/ids',demo).then(res=>{
			console.log(res)
		})
	});

	$('#btSaves').click(function() {
		let arr = [];
		$('.checkbox').each((i, v)=>{
			arr.push(v.dataset)
		})
		$http.post('/save/demos',arr).then(res=>{
			console.log(res)
		})
	});

	$('#btSaves2').click(function() {
		let arr = [];
		$('.li_item').each((i, v)=>{
			arr.push({
				id: $(v).children('span[name="id"]').text(),
				name: $(v).children('span[name="name"]').text(),
				createDate: $(v).children('span[name="createDate"]').text()
			})
		})
		$http.post('/save/demos',arr).then(res=>{
			console.log(res)
		})
	});

	$('#btSaveDemoVo').click(function() {
		let ps = getPs();
		$http.post('/save/demoVo',ps).then(res=>{
			console.log(res)
		})
	});

	function getPs(){
		let arr = [];
		$('.li_item').each((i, v)=>{
			arr.push({
				id: $(v).children('span[name="id"]').text(),
				name: $(v).children('span[name="name"]').text(),
				createDate: $(v).children('span[name="createDate"]').text()
			})
		})
		return {
			id: $('#id').val(),
			demos: arr,
			ids: [1,2,3],
			name: $('#name').val(),
		}
	}
	function goPage(n) {
		listPage(n)
	}

	function listPage(pageNo){
		ajaxAnywhere.getAJAX('/j/list?pageSize=2&pageNo='+pageNo, 'zoneJ');
	}

</script>
<script src="/resources/js/http.js"></script>
<script src="/resources/js/vue.global.prod.js"></script>
<script src="/resources/js/bootstrap.bundle.min.js"></script>
<script src="/resources/js/feather.min.js"></script>
</body>
</html>